<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>EventTarget</title>
        <style type="text/css">
            .container { border: 1px solid blue ; }
            .container>.title { font-weight: bold; }
            .container>div { border: 1px solid green ; margin: 10px ; }
        </style>
    </head>
    <body>

        <h3>EventTarget</h3>
        
        <div class="container owner">
            <p class="title">EventTarget自有属性</p>
        </div>

        <div class="container proto">
            <p class="title">EventTarget原型属性</p>
        </div>

        <script type="text/javascript">
            const o = document.querySelector( '.owner' );
            let names = Object.getOwnPropertyNames( EventTarget );
            names.forEach( name => {
                let n = document.createElement( 'div' );
                n.innerHTML = name ;
                o.appendChild( n );
            });

            const p = document.querySelector( '.proto' );
            names = Object.getOwnPropertyNames( EventTarget.prototype );
            names.forEach( name => {
                let n = document.createElement( 'div' );
                n.innerHTML = name ;
                p.appendChild( n );
            });
        </script>
        
    </body>
</html>